<div class="l-hero c-hero c-hero--home">
	{% include "heroes/svg/home.njk" %}
	<div class="l-hero__promo c-a11y-summary">
		<h1 id="title" class="u-font-size-body-large c-a11y-summary__explanation">
			<abbr>a11y</abbr> stands for <span class="u-text-transform-uppercase c-a11y-summary__accessibility">accessibility<span>
		</h1>
		<img class="c-a11y-summary__11-characters" alt="The phrase '11 characters'. Arrows are pointing to the first letter c and the letter t in the word 'accessibility' to show how the numeronym is formed." src="/img/heroes/11-characters-lightmode.svg" />
		<p class="c-a11y-summary__mission">
			The A11Y Project is a community-driven effort to make digital accessibility easier.
		</p>
	</div>
</div>

<p class="c-cta-get-started">
	<a class="u-text-transform-uppercase c-cta-get-started__link" href="#learn-the-fundamentals-and-principles-behind-accessible-design">How do I get started?</a>
</p>
